<template>
    <div class="shop-item" v-for="item in shopItemList" :key="item.shopId">
        <div class="title-wrap">
            <div class="title-block">
                <div class="title black-color text-overflow">{{ item.nm }}</div>
                <div class="price-block">
                    <span class="price">{{ item.sellPrice }}</span>
                    <span class="after">元起</span>
                </div>
            </div>
            <div class="location-block">
                <div class="adress">{{ item.addr }}</div>
            </div>
            <div class="lable-block">
                <span
                    :style="{ border: '1px solid' + ' ' + tagItem.color }"
                    v-for="tagItem in item.labels"
                    :key="tagItem.name"
                    >{{ tagItem.name }}</span
                >
            </div>
            <div class="discount-block">
                <div class="discount">
                    <span class="discount-label"></span>
                    <span class="discount-label-text">{{ item.promotion.cardPromotionTag }}</span>
                </div>
            </div>
        </div>
        <div class="recent">
            <span>近期场次：</span>
            <span class="timer">{{ item.showTimes }}</span>
        </div>
    </div>
</template>

<script setup>
import { computed, defineProps, getCurrentInstance, inject, onMounted, ref } from "@vue/runtime-core";
import { getShopList } from "../../../network/Home/index";
import { useRoute } from "vue-router";
const route = useRoute();

const props = defineProps({
    showDaysList: {
        type: Array,
        default: function () {
            return [];
        },
    },
});

const shopItemList = ref([]);
onMounted(async () => {
    const {
        data: { cinemas },
    } = await getShopList({
        limit: 20,
        offset: 0,
        utm_term: 7.5,
        client: "iphone",
        channelId: 4,
        areaId: -1,
        brandId: -1,
        districtId: -1,
        hallType: -1,
        lineId: -1,
        movieId: route.params.id,
        serviceId: -1,
        stationId: -1,
        showDate: "2021-7-02",
        cityId: 57,
        ci: 57,
    });
    shopItemList.value = cinemas;
});
</script>

<style lang="less" scoped>
.shop-item {
    display: flex;
    flex-direction: column;
    height: 143px;
    margin-left: 15px;
    padding: 13px 15px 13px 0;
    border-bottom: 1px solid #e5e5e5;
    .title-wrap {
        flex: 1;
        .flex-cloumn-between();
        .title-block {
            display: flex;
            justify-content: space-between;
            .title {
                font-size: 16px;
            }
            .price {
                font-size: 18px;
                color: #f03d37;
            }
            .after {
                color: #f03d37;
                font-size: 12px;
                margin-left: 3px;
            }
        }
        .location-block {
            .adress {
                .text-overflow();
                font-size: 13px;
            }
        }
        .lable-block {
            span:first-child {
                margin: 0;
            }
            span {
                margin-left: 5px;
                font-size: 12px;
                padding: 0 3px;
                border-radius: 2px;
            }
        }
        .discount-block {
            .discount {
                line-height: 18px;
                display: flex;
                align-items: center;
                .discount-label {
                    display: inline-block;
                    margin-right: 5px;
                    width: 15px;
                    height: 14px;
                    background: url("");
                    background-size: 100% 100%;
                }
                .discount-label-text {
                    color: #999;
                    font-size: 12px;
                }
            }
        }
    }
    .recent {
        line-height: 18px;
        span {
            color: #999;
            font-size: 12px;
        }
        span:nth-child(2) {
            .margin-zero();
        }
        // span:nth-child(3) {
        //     border-left: 1px solid #e5e5e5;
        //     border-right: 1px solid #e5e5e5;
        //     padding: 0 6px;
        // }
        .timer {
            margin-left: 6px;
            :first-child {
                margin: 0;
            }
        }
    }
}
</style>
